<template>
  <div class="ChatPreContent" :class="{ ChatPreContentUnTauri: !isTauri() }">
    <n-tabs class="tabs" v-model:value="tabIndex" @update:value="tabsUpdate" type="line" style="padding-bottom: 10px;">
      <n-tab :name="0">
        内置预设
      </n-tab>
      <n-tab :name="1">
        导入预设
      </n-tab>
    </n-tabs>
    <n-upload accept='.json,.png' ref="upload" style="position: absolute;" :show-file-list="false"
      :custom-request="exportPreChat">
    </n-upload>
    <div class="ChatPreList">
      <n-card content-class="ChatPreItemContent">
        <div :key="item.id" v-for="item in tableData">
          <ChatPreItem :class="{ select: selectRow === item }" @select="(value) => selectRow = value" :value="item" />
        </div>
      </n-card>
    </div>
    <div class="headerAction">
      <n-pagination :page-slot="5" :disabled="loading" @update:page="handlePageChange" v-model:page="page"
        :page-count="Math.ceil(pageCount / 10)" />
      <n-button on @click="() => {
    const chatId = createChat()
    chatId && emit('deactive', chatId)
  }" :disabled="!selectRow?.id && !selectRow?.name" type='primary'>从选中预设创建对话</n-button>
    </div>
  </div>
</template>

<script setup lang='tsx'>
import ChatPreItem from "./ChatPreItem.vue";
const { isTauri } = Tauri
const emit = defineEmits(["deactive"]);
const { tabIndex, tabsUpdate, exportPreChat, tableData, selectRow, createChat, loading, handlePageChange, page, pageCount, init } = usePreChat()
setTimeout(() => {
  init()
}, 1000);
</script>

<style lang="scss">
.ChatPreContent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 10px;
}

.ChatPreContentUnTauri {
  height: calc(100vh - 50px) !important;
}

.headerAction {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

@media screen and (max-width: 800px) {
  .headerAction {
    gap: 10px;
    flex-direction: column;
  }
}

.preNo {
  margin-bottom: 10px;
}

.hasSelectedRow {
  .n-data-table-td {
    background: #b7ddf36c;
  }
}

.topBtn {
  position: absolute;
  top: 14px;
  left: 180px;
  display: flex;
  gap: 12px;
  z-index: 2;
}

.ChatPreList {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  overflow: auto;
  gap: 20px;
}

body {
  overflow-x: hidden;
}

.select {
  background: #b7ddf36c;
}

body {
  overflow: hidden;
}

.ChatPreItemContent {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 800px) {

  .ChatPreItemContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>